import React, { memo } from 'react';
import { Row, Col, Icon, Tooltip } from 'antd';
import { FormattedMessage } from 'umi/locale';
import styles from './Analysis.less';
import { ChartCard, MiniArea, MiniBar, MiniProgress, Field } from '@/components/Charts';
import Trend from '@/components/Trend';
import numeral from 'numeral';
import Yuan from '@/utils/Yuan';
import dengpao from '@/assets/icons/dengpao.png'
import wenti from '@/assets/icons/wenti.png'
import wen from '@/assets/icons/wen.png'
const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
  style: { marginBottom: 24 },
};
const MyIcon = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1131883_8ubp5bmbjb5.js', // 在 iconfont.cn 上生成
});
const a = 11
const IntroduceRow = memo(({ loading,chatCountList,systemCountList,unknownCountList,userCountList,answerRatioStatis,curve }) => (
  <Row gutter={24}>
    {/* 问答总数 */}
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title={<FormattedMessage id="app.IntroduceRow.questions-answers-sum" defaultMessage="Answers sum" />}
        action={
            <Icon type="user" style={{color:'#76d7d7'}} />
        }
        total={numeral(answerRatioStatis.hitAllCount).format('0,0')}
        contentHeight={46}
      >
       {curve=='0'?null:<MiniArea background={'#10c8ff'} line height={45} color="#d0f5ff" data={chatCountList} />} 
      </ChartCard>
    </Col>
    {/* 用户数量 */}
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title={<FormattedMessage id="app.IntroduceRow.target-user-quantity" defaultMessage="User quantity" />}
        action={
            <img src={wen}  />
        }
        total={numeral(answerRatioStatis.hitUserCount).format('0,0')}
        contentHeight={46}
      >
       {curve=='0'?null: <MiniArea background={'#ffaa10'} line height={45} color="#ffedd0" data={userCountList} />} 
      </ChartCard>
    </Col>
    {/* 命中闲聊库数量 */}
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title={<FormattedMessage id="app.IntroduceRow.target-chat-quantity" defaultMessage="Chat quantity" />}
        action={
             <img src={wenti}  />
        }
        total={numeral(answerRatioStatis.hitSysCount).format('0,0')}
        contentHeight={46}
      >
      {curve=='0'?null:<MiniArea background={'#ff4710'} line height={45} color="#ffdad0" data={systemCountList} />}  
      </ChartCard>
    </Col>
    {/* 命中未知题目数量 */}
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title={<FormattedMessage id="app.IntroduceRow.target-unknown-quantity" defaultMessage="Unknown quantity" />}
        action={
             <img src={dengpao}  />
        }
        total={numeral(answerRatioStatis.hitUnknownCount).format('0,0')}
        contentHeight={46}
      >
       {curve=='0'?null:<MiniArea background={'#0a9c33'} line height={45} color="#ceecd6" data={unknownCountList} />}
      </ChartCard>
    </Col>
  </Row>
));

export default IntroduceRow;
